JavaScript响应式编程 - RxJs入门

在angular2项目的过程中，接触到了Rxjs这个东西，对它进行了一下简单的了解，对它的基本用法进行了学习和总结，介绍了：

基本概念
如何创建一个Observerble可观察序列
Observer实例的生命周期
如何对Observer实例进行订阅？以及监听他的next、error、complete事件？
rxjs交互图怎么看？
map、filter、from等简单的操作符含义

它是什么

Rx（ReactiveX, Reactive Extensions）,它是微软开发和维护的基于响应式编程（Reactive Programming）范式实现的一套工具库集合，于2012年11月开源，它提供了一系列接口规范来帮助开发者方便的处理异步数据流。Rx系列结合了观察者模式、迭代器模式、函数式编程，它已成为业界响应式编程的优秀实践。

RxJs就是Rx在JavaScript层面上的实现，除此之外还有RxJava、Rx.Net、RxSwift等等。

RxJs全名Reactive Extensions for JavaScript，翻译为Javascript的响应式扩展, 它的思路是把随时间不断变化的数据、状态、事件等等转成可被观察的序列(Observable Sequence)，然后订阅序列中那些Observable对象的变化，一旦变化，就会执行事先安排好的各种转换和操作。

几个名词

Observable: 可观察的数据序列.
Observer: 观察者实例，用来决定何时观察指定数据，只有在Rx.Observable.create创建方法可以获取
Subscription: 观察数据序列返回的订阅实例.
Operators: Observable的操作符，包括转换数据序列，过滤等，所有的Operators方法接受的参数是上一次发送的数据变更的值，而方法返回值我们称之为发射新数据变更

Observable可以发射三种类型的事件：next、error、complete
Subscription可以订阅三种类型的事件：onNext onError onComplete
Observable有四个生命周期：创建、订阅、执行、销毁。

使用create创建一个Observable

const Rx = require('rxjs/Rx');
const {Observable} = require('rxjs/Observable');
require('rxjs/add/observable/of');
require('rxjs/add/operator/map');
    
//创建序列源
const source = Observable.create(observer=>{
    observer.next('foo');
    setTimeout(()=> observer.next('bar'), 1000);
});
//订阅
const subscription = source.subscribe(data=>console.log(data));

捕获error和complete

let source = Observable.create(observer=>{
    observer.next('foo');                         //发射数据
    observer.error('my error');                   //发射错误
    setTimeout(()=> observer.next('bar'), 1000);
    setTimeout(()=>observer.complete(),2000);     //发射完成
});

let source1 = source.map(e=>`hello ${e}`);

let subscription = source1
    .subscribe(
        data=>console.log(data),
        error=>console.log(error),
        ()=>console.log('complete')
        );

rxjs交互图

每条线表示一个数据序列
每个球表示发送的数据变更，小竖线表示complete
方法下面表示经过map、filter等操作符处理过后产生的新序列

屏幕快照 2017-03-03 14.23.49

//序列1
let source = Observable.create(observer => {
    observer.next(1);
    observer.next(2);
    observer.next(3);
});
//序列2
let source2 = source.map(e=>e=e*10);
//订阅序列1
source.subscribe(data=>console.log(data));
//订阅序列2
source2.subscribe(data=>console.log(data));